<template>
    <div class="goosType">
        <h1>商品种类</h1>
        <!-- 商品列表 -->
        <div class="list-row" v-for="(item,index) in goodsType" :key="index">
            <!-- 商品名字，及变化 -->
             <span v-if="item.isspan">{{item.name}}</span>
             <input type="text" v-else v-model="item.name">
             <!-- 商品图片，及变化 -->
             <img :src="item.img" alt="" v-if="item.isspan">
             <el-upload v-else class="upload-demo" drag action="/files/upLoad" :on-success="successUpdata" multiple>
                    <i class="el-icon-upload"></i>
                 <div class="el-upload__text">
                         将图片拖到此处，或
                         <em>点击上传</em>
                 </div>
                 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>
               <!-- 商品按钮，及变化 -->
             <div class="button">
                 <!-- 开始修改按钮 -->
                 <el-button type="primary" icon="el-icon-edit" v-if="item.isspan" circle @click="updateStart(index)"></el-button>
                 <!-- 修改完毕，提交修改 -->
                  <el-button type="primary" @click="update(item.name,item._id)" v-else>提交修改</el-button>
             </div>
             <div class="button"> <el-button type="danger" @click="deleteOne(item._id)" icon="el-icon-delete" circle></el-button></div>
             
        </div>
        <!-- 新增 -->
        <div class="list-row" >
             <span @dblclick="change" v-if="spanchange">{{spanvalue}}</span>
             <input type="text" v-else v-model="spanvalue" @blur="changeback">
             <div class="load">
              <el-upload class="upload-demo" drag action="/files/upLoad" :on-success="success" multiple>
                    <i class="el-icon-upload"></i>
                 <div class="el-upload__text">
                         将图片拖到此处，或
                         <em>点击上传</em>
                 </div>
                 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过3M</div>
               </el-upload>
             </div>
             <div class="button"> <el-button type="success" icon="el-icon-circle-plus" @click="addOne" circle></el-button></div>
        </div>
    </div>
    
</template>
<script>
import axios from "axios"
export default {
    data(){
       return{
           goodsType:[],
           spanchange:true,
           spanvalue:"添加请双击",
           imgvalue:"",
           updateImg:""
       }
    },
    mounted(){
       this.getall()
    },
    methods:{
        // 开始修改
        updateStart(index){
             this.goodsType[index].isspan=false
        },
        // 修改图片
        successUpdata(response, file, fileList){
           console.log(response);
            let path = response.file[0].path.substr(6);
            this.updateImg=path;
        },
        // 提交修改
        update(name,_id){
            console.log({
                _id,
                name,
                img:this.updateImg
            });
            axios
                .put("/goodsType/",{
                    _id,
                    name,
                    img:this.updateImg
                })
                .then((res)=>{
                    console.log(res.data);
                    if(res.data){
                        this.getall();
                    }
                })
        },
        // 新增
        addOne(){
           axios
                .post("/goodsType/",{
                    name:this.spanvalue,
                    img:this.imgvalue,
                })
                .then((res)=>{
                    console.log(res.data);
                    if(res.data){
                         this.getall();
                         this.spanvalue="添加请双击"
                    }
                })
        },
        // 上传成功后
        success(response, file, fileList){
            console.log(response);
            let path = response.file[0].path.substr(6);
            this.imgvalue=path;
        },
        // 双击
        change(){
           this.spanchange=false;
           this.spanvalue="";

        },
        // 变回来
        changeback(){
            this.spanchange=true;
        },
        getall(){
            // 获取所有
            axios
                .get("/goodsType/")
                .then((res)=>{
                    console.log(res.data);
                    this.goodsType=res.data;
                })
             
        },
        // 删除
        deleteOne(_id){
            axios
                .delete("/goodsType/",{data:{_id}})
                .then((res)=>{
                    console.log(res.data);
                    if(res.data){
                        this.getall();
                    }else{
                        alert("删除失败")
                    }
                })
        }
    }

}
</script>
<style>
.goosType{
    background-color: rgb(20, 207, 67);
    color: rgb(236, 236, 236);
}
.list-row{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid rgb(204, 204, 204);
    padding: 20px 100px 20px 100px;
}
.list-row img{
    display: block;
    width: 200px;
    height: 140px;
    margin-left: 100px;
}
.list-row .button{
    margin-left: 150px;
}
h1{
    line-height: 60px;
    color: rgb(240, 240, 240);
    font-size: 23px;
}
</style>
